<template>
	<view class="content">
		
		<view class="main">
			<view class="banner">
				<!-- <image :src="banner ? banner : '../../static/image/banner.jpg'" mode=""></image> -->
				<!-- banner图 -->
				<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/banner.png" class="banner_img"></image>
				<!-- banner图上页面按钮 -->	
				<view class="header_link flex flex_spa">
					<view class="header_item" v-for="(item,i) in repairList" :key="i" @click="goToUrl(item.name)">
						<image :src="item.img" mode="widthFix"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="trouble_removal">
				<view class="trouble_removal_header flex flex_bet flex_align ">
					<view class="title_header">故障排除</view>	
					<view class="header_search">
						<u-input placeholder="故障排除搜索" v-model="searchKeyWord" prefixIcon="search" shape="circle" fontSize="24rpx" @blur="searchBlur">
							<template slot="suffix">
								<u-button
									type="success"
									size="mini"
									class="search_btn"
									@click="search"
								>搜索</u-button>
							</template>
						</u-input>
						<view class="search_linkage" v-if="searchShow">
							<view class="search_item" v-for="item in searchList" :key="item.id" v-if="searchList" @click="faultDetails(item.id)">
								<view class="item_tag" 
									:style="{
										backgroundColor:item.cid == 1 ? '#abc9f8'
										 :item.cid == 2?'#95eee8'
										 :item.cid == 3?'#f3d694'
										 :item.cid == 4?'#a8eed6'
										 :item.cid == 5?'#b2ea7d'
										 :item.cid == 6?'#ffb39b'
										 :item.cid == 10?'#e6ec51'
										 :item.cid == 8?'#6cdbf5':'#bda4f9',
									}">{{item.category_name}} 
									</view>
								<view class="item_text">{{item.name}}</view>
							</view>
							<view class="no_data" v-if="noData">
								无数据
							</view>
						</view>
					</view>
				</view>
				<trouble-removal></trouble-removal>
			</view>

		</view>
				<!-- <view class="trouble_removal">
					<view class="title_header">寄修服务</view>
					<view class="repair flex flex_align flex_bet">
						<view class="repair_box box_redius" v-for="item in repairList" :key="item.name"
							@click="goToUrl(item.name)">
							<image :src="item.img" mode=""></image>
							<view class="text">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="trouble_removal">
				<view class="title_header">故障排除</view>
				<trouble-removal></trouble-removal>
			</view>
			<view class="trouble_removal">
				<view class="title_header">寄修服务</view>
				<view class="repair flex flex_align flex_bet">
					<view class="repair_box box_redius" v-for="item in repairList" :key="item.name"
						@click="goToUrl(item.name)">
						<image :src="item.img" mode=""></image>
						<view class="text">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="trouble_removal">
				<view class="title_header">服务网点</view>
				<view class="service box_redius flex flex_align flex_bet" @click="goToUrl('服务网点')">
					<image class="mar_right" src="../../static/image/index10.png" mode=""></image>
					<view class="firm_city">
						<view class="company">{{addressList.name}}</view>
						<view>{{addressList.addr}}</view>
					</view>
					<view class="iconfont icon-xiangyoujiantou"></view>
				</view>
			</view>
		</view> -->
		<!-- 服务网点模块 -->
		<view class="trouble_removal">
				<view class="title_header mar_top mar_bottom" style="padding-left: 30px;">服务网点</view>
				<view class="service box_redius  flex flex_align flex_bet" @click="goToUrl('服务网点')">
					<image class="mar_right" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/index10.png" mode=""></image>
					<view class="firm_city">
						<view class="company">{{addressList.name}}</view>
						<view>{{addressList.addr}}</view>
					</view>
					<view class="iconfont icon-xiangyoujiantou"></view>
				</view>
		</view>
	</view>
</template>

<script>
	import TroubleRemoval from './component/troubleRemoval.vue'
	import{
		technicalList
	}from '@/api/index.js'
	import {
		productList
	} from '@/api/product.js'
	import {
		addressList,
		userAddressList
	} from '@/api/address.js'
	import {
		platformInfo,
		getWxOpenId
	} from '@/api/Public.js'
	export default {
		components: {
			TroubleRemoval
		},
		data() {
			return {
				repairList: [{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/index-header1.png',
						name: '物料价格'
					}, {
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/index-header2.png',
						name: '配件商城'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/index-header3.png',
						name: '寄修申请'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/index-header4.png',
						name: '寄修记录'
					}
				],
				addressList: {},
				banner: '',
				searchKeyWord:'',//搜索关键字
				searchShow:false,
				searchList:[],
				tag_bg:'',
				noData:false,
				flag:true
			}
		},
		computed:{
			
		},
		onLoad() {
			let that = this
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.getWxOpenIds(loginRes.code)
				}
			});
			that.getaddressList()
			that.getplatformInfo()
			that.getuserAddressList()
		},
		onShow() {
			// this.getuserAddressList()
			const productId = ['wx7af17f170999206b']
			return
			wx.navigateTo({
				url: `plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=97775816`,
			});
		},
		watch:{
			searchKeyWord(val){
				if(val==''){
					this.searchShow = false
				}
			}
		},
		methods: {
			//获取oepnId
			getWxOpenIds(code) {
				getWxOpenId({
					code: code
				}).then(res => {
					console.log('login', res);
					uni.setStorageSync("openid", res.data.openid)
					uni.setStorageSync("session_key", res.data.session_key)
					this.$store.commit('editOpenId', res.data)
				})
			},
			//搜索
			search(){
				if(this.searchKeyWord=='')return
				if(!this.flag) return
				this.flag = false
				setTimeout(()=>{
					this.searchShow=true
					let params ={
						title:this.searchKeyWord
					}
					technicalList(params).then(res=>{
						this.noData = false
						this.searchList = res.data
						console.log(res);
					}).catch(err=>{
						this.noData = true
					})
					console.log(this.searchKeyWord);
					this.flag = true
				},1500)
			
			},
			goToUrl(name) {
				let url = ''
				switch (name) {
					case '寄修申请':
						url = '/pages/afterService/index'
						uni.switchTab({
							url: url
						});
						return
						break;
					case '服务网点':
						url = '/pages/afterAddress/index'
						break;
					case '物料价格':
						url = '/pages/accessoriesPrice/index'
						break;
					case '配件商城':
						// url = 'plugin-private://wx34345ae5855f892d/pages/index/index'
						wx.navigateTo({
								// url: `plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=97775816`,
								url: `plugin-private://wx34345ae5855f892d/pages/home/home`,
						})
						break;
					case '寄修记录':
						url = '/pages/applicationRecord/index'
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			//售后地址列表
			getaddressList() {
				addressList().then(res => {
					this.addressList = res.data[0]
					this.$store.commit('editAddressId', this.addressList)
					console.log(this.addressList,'sssss');
					uni.setStorageSync('user_address_id', this.addressList.id)
				})
			},
			//获取我的地址列表
			getuserAddressList() {
				userAddressList().then(res => {
					// console.log(res.data,'index');
					let addressList = res.data
					const defAddress = addressList.filter(item=>{
						return item.is_default == 1 ? item:item[0]
					})
					if(defAddress[0]){
						console.log(defAddress[0],'默认地址');
						this.$store.commit('editUserAddressId', defAddress[0])
						uni.setStorageSync('sendId', defAddress[0].id)
					}else{
						this.$store.commit('editUserAddressId', addressList[0])
					}
					
				})
			},
			//获取平台信息
			getplatformInfo() {
				platformInfo().then(res => {
					console.log(res.data,'123456');
					this.banner = res.data.banner
					this.$store.commit('editPolicy', res.data)
				}).catch(err => {})
			},
			searchBlur(){
				this.searchShow = false
				this.searchList = []
			},
			//跳转对应的连接
			faultDetails(id) {
				uni.navigateTo({
					url: '/pages/faultDetails/index?id=' + id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		  margin: 0; 
			padding-bottom: 20px;
		}
		.main{
			margin: 0;
			background: #fff;
			border-bottom-right-radius: 20px;
			border-bottom-left-radius: 20px;
		}
		.banner {
			width: 100%;
			height: 550rpx;
			image {
				height: 80%;
				width: 100%;
			}
		}
		.header_link{
			position: relative;
			top: -90rpx;
			border-radius: 10px;
			background: #fff;
			margin: 0 20px;
			box-shadow: 0 1px 5px 1px #f2f2f2;
			.header_item{
				position: relative;
				top: -15px;
			}
		}
		.trouble_removal_header{
			padding: 0 20px;
		}
		.title_header {
			color: #333333;
			font-size: 28rpx;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				width: 10rpx;
				height: 40rpx;
				background-color: #3896ff;
				left: 20px;
			}
		}
		.header_search{
			position: relative;
			width: 60%;
			/deep/.u-input{
				border-color: red;
				background: #f8f8f8;
				padding: 4px !important;
				/deep/ .u-icon__icon{
					color: #dddddd;
				}
			}
			/deep/ .u-button{
				font-size: 13px;
				border-radius: 50px;
				width: none;
				color: #2d9bff;
				background: #fff;
				border:none;
				box-shadow: 0 0 5px 1px #ddd;
			}
		}
		.service {
			width: 90%;
			margin: 0 auto;
			image {
				width: 34rpx;
				height: 40rpx;
			}
			.firm_city {
				.company {
					color: #333333;
					line-height: 20px;
				}
			}
		}
		.search_linkage{
			position: absolute;	
			top: 65rpx;
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			box-shadow: 0 0 10px 0 #ddd;
			padding: 10rpx;
			min-height: 60rpx;
			max-height: 500rpx;
			overflow-y: auto;
		}
		.no_data{
			text-align: center;
			width: 100%;
			padding: 10px 0;
		}
		.item_text{
			color: #c1c1c1;
			width: 62%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp:2 ;
			-webkit-box-orient: vertical;
			font-size: 24rpx;
		}
		.search_item{
			border-bottom: 1px solid #f7f7f7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 15rpx;
		}
		.item_tag{
			background-color: green;
			border-radius: 10rpx;
			height: 40rpx;
			text-align: center;
			width: 110rpx;
			line-height: 40rpx;
			font-size: 20rpx;
			color: #fff;
		}
</style>
